<template>
    <div id="mingxi" v-infinite-scroll="loadMore"
     infinite-scroll-disabled="busy"
     infinite-scroll-distance="10">
        <div class="mingxi-wrapper" v-if=" getMingXiinfo.message ==''" >
            <ul>
                <li v-for = "item in getMingXiinfo.data">
                    <div class="left">
                      {{ item.coursename }}
                    </div>
                    <div class="right">
                        <span class="money-mingx">{{ item.money }}元</span>
                        <span class="date-mingx">{{ item.date }}</span>
                    </div>
                </li>
            </ul>
               <div class="more"><i class="loading-more" :style= "'background-image: url('+$qiniu.url+'assets/img/loadingnew.gif)'"></i></div>
        </div>
        <div class="mingxi-wrapper" v-else>
            <div class="mingx-null">
                当前暂无收支明细
            </div>
        </div>
        <Toast :showtoast = 'showtoast'></Toast>
        <div class="model-wrapper"></div>
        <Loading v-if="LoadingShow"></Loading>
    </div>
</template>
<script>
    import {
        showFooter,
        errFun,
        refreshTitle
    } from "../../tools.js"
    import axios from 'axios';
    import api from "../../api";
    import Loading from '../loading.vue';
    import Toast from '../common/toast.vue';
    import Vue from 'vue'
    import infiniteScroll from 'vue-infinite-scroll';
    Vue.use(infiniteScroll)

    export default {
        components: {
            Loading,
            Toast,
        },
        computed: {
            LoadingShow() {
                if (this.page == 1) {
                    return this.$store.state.loadings.show
                }
            },

        },
        data() {
            return {
                page: 1,
                getMingXiinfo: {
                    data: [],
                    message: [],

                },
                showtoast: null,
            }
        },
        created() {
            refreshTitle(this.$route.meta.title);
            // this.$store.dispatch('GET_MINGX_INFO');
        },
        methods: {
            loadMore() {
                var self = this;
                self.busy = true;
                setTimeout(function() {
                    self.page++;
                    self.busy = false
                }, 600)
            },
            getMX() {
                var that = this;
                var more = document.querySelector(".loading-more");
                if (that.page != 1) {
                    more.style.display = "block";
                }
                api.getMingXinfo(that.page).then(function(result) {
                    if (more) {
                        more.style.display = "none";
                    }
                    if (result.data.code == 100) {
                        // if (that.page > 1) {
                        that.getMingXiinfo.message == "";
                        // }
                        that.getMingXiinfo.data.push.apply(that.getMingXiinfo.data, result.data.result);
                    } else {
                        if (that.page == 1) {
                            that.getMingXiinfo.message = result.data.message;
                        } else {
                            // var model = document.querySelector(".model-wrapper");
                            // that.showtoast = 'nomingxi';
                            // model.style.display = "block";
                            // setTimeout(function() {
                            //     that.toast = null;
                            // }, 200)
                            console.log('已经滑到最底部啦！')
                        }

                    }
                })
            }
        },
        mounted() {
            this.$nextTick(function() {
                this.getMX(this);
            })
        },
        watch: {
            page: {
                handler: function(val, oldVal) {
                    if (this.page >= 2) {
                        this.getMX();
                    }
                },
                deep: true
            }
        },
    }
</script>
<style>
    #mingxi {
        .mingxi-wrapper {
            width: 100%;
        }
        .mingxi-wrapper .mingx-null {
            position: absolute;
            left: 0;
            top: -30%;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #a2a4b0;
            border-bottom: 1px solid rgba(253, 184, 1, .5);
        }
        .mingxi-wrapper ul li {
            width: 100%;
            height: 70px;
            border-bottom: 1px solid rgba(253, 184, 1, .5);
            font-size: 14px;
            line-height: 70px;
            color: #eee;
            /*padding:0 10px;*/
        }
        .mingxi-wrapper ul li .left {
            float: left;
            font-size: 16px;
            margin-left: 10px;
        }
        .mingxi-wrapper ul li .right {
            float: right;
            margin-right: 10px;
            height: 100%;
            text-align: center;
        }
        .mingxi-wrapper ul li .right .money-mingx {
            display: block;
            height: 50%;
            line-height: 50px;
            text-align: right;
            font-size: 16px;
            color: #fab710;
        }
        .mingxi-wrapper ul li .right .date-mingx {
            display: block;
            font-size: 12px;
            /*height: ;*/
            line-height: 25px;
            color: #979aa3;
        }
        .more {
            width: 100%;
            height: 40px;
            color: #fff;
            text-align: center;
            position: relative;
        }
        .more .loading-more {
            width: 30px;
            height: 30px;
            /*background-color: red;*/
            background-size: 30px 30px;
            position: absolute;
            left: -7%;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /*display: none;*/
        }
        .model-wrapper {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            text-align: center;
        }
    }
</style>